<!DOCTYPE html>
<html lang="en" style="user-select:none">
<head>
	<meta charset="UTF-8">
	<title>轮播插件</title>
	<link rel="stylesheet" href="./css/man-carousel.css">
	<script type="text/javascript" src="./js/jquery-3.1.0.js"></script>
	<script type="text/javascript" src="./js/man-carousel.js"></script>
	<style>

		body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;	
		}
		.man-carousel {
			position: relative;
			width: 50%;
			height: 400px;
			margin: 100px auto 0;
		}
	</style>
</head>
<body>
	<div class="man-carousel">
		<div class="carousel-container">
			<div class="carousel-box">
				<div class="carousel-slide">这是第1页</div>
				<div class="carousel-slide">这是第2页</div>
				<div class="carousel-slide">这是第3页</div>
				<div class="carousel-slide">这是第4页</div>
				<div class="carousel-slide">这是第5页</div>
				<div class="carousel-slide">这是第6页</div>
				<div class="carousel-slide">这是第6页</div>
				<div class="carousel-slide">这是第8页</div>
			</div>
		</div>
		<div class="carousel-left"><img src="./img/left.png" alt=""></div>
		<div class="carousel-right"><img src="./img/right.png" alt=""></div>
	</div>
	<script>
		$(".man-carousel").carousel({
			Bnum: 1,	//显示个数
			Bsorter: true,	//是否开启分页器
			Bbutton: true,	//是否开启前进按钮
			Btouch: true,	//是否鼠标滑动
			Broll: true,	//是否自动滚动
			BrollTime: 2000,	//自动滚动速度
			Bvelocity: 200,	//滚动速度
			Bmargin: 0	//div的间距
		});
	</script>
	<!-- 
		使用文档：
		参数：
		1、Bnum：窗口显示的个数，值为（正整数）默认为：
		2、Bsorter：是否开启分页器，值为（true or false）默认为：true
		3、Bbutton：是否开启前进按钮，值为（true or false）默认为：true
		4、Btouch：是否支持鼠标滑动滚动，值为（true or false）默认为：true
		5、Broll：是否支持自动滚动，值为（true or false）默认为：true
		6、BrollTime：当支持自动轮播时的轮播时间，以毫秒为计算单位，值为（正整数）默认为：2000
		7、Bvelocity：当滚动到下一个div时，滚动过程的时间，以毫秒为计算单位，值为（正整数）默认为：200
		8、Bmargin：每一个div之间的间隔，以carousel-box为参考，按百分比计算，值为（正整数）默认为：0
		注意事项：
		1、man-carousel内的div必须添加，缺一不可
		2、参数为选填项
		3、man-carousel大小和carousel-container大小可以手动设置
		4、jQuery必须在man-carousel前加载
	 -->
</body>
</html>